<template>
    <div class="content" id="content">
        <div class="head clearfix">
            <h1>莱尼尔数据分析大屏</h1>
            <div class="time" id="showTime"></div>
            <div class="name"><a href="#">莱尼尔智能科技有限公司</a></div>
        </div>
        <!-- 全屏显示 -->
        <!-- <div class="btn"> -->
        <!-- <span  style="color:#918F8F" > -->
        <!-- <img :src="isFullFlag" style="vertical-align:middle"/> -->
        <!-- <el-button type="primary" icon="el-icon-monitor" plain size="mini"
        style="margin-bottom: 5px" id="full" >全屏显示</el-button> -->
        <!-- </span> -->
        <!-- </div> -->
        <!-- 表格 -->
        <div class="tab">

            <el-table :data="tableData" style="width: 99.5%;border-radius: 10px"
                :header-cell-style="{ textAlign: 'center', background: '#000066', color: '#daf9ff' }"
                :cell-style="styleBack">
                <el-table-column prop="recordTime" label="当前数据时间">
                </el-table-column>
                <el-table-column prop="activeElectricity" label="本日能耗">
                </el-table-column>
                <el-table-column prop="electricityRateType" label="当前收费类型">
                </el-table-column>
                <el-table-column prop="electricityRate" label="当前电价(元/KWH)">
                </el-table-column>
                <el-table-column prop="electricityRateTop" label="尖峰值电费">
                </el-table-column>
                <el-table-column prop="electricityRateHigh" label="峰值电费">
                </el-table-column>
                <el-table-column prop="electricityRateCommon" label="平直电费">
                </el-table-column>
                <el-table-column prop="electricityRateLow" label="谷值电费">
                </el-table-column>
                <el-table-column prop="electricityRateAll" label="电费总计">
                </el-table-column>
            </el-table>


            <div class="btn">
                <el-button type="primary" id="full" @click="toggleFullScreen">
                    <!-- 查看电费收费详情 -->{{ qp }}
                </el-button>
            </div>
        </div>
        <div class="line">
            <div class="l">
                <div id="main"> </div>

            </div>
            <div class="c">
                <!-- <dv-border-box-12> -->
                <dv-scroll-board :config="config" class="lunbo" @mouseover="skipto" />
                <!-- </dv-border-box-12> -->
            </div>
            <div class="r">
                <div id="echarts"></div>

            </div>
        </div>
        <div class="chart">
            <div class="cleft">
                <dv-border-box-12 ref="box" :key="key">

                    <div id="main1"></div>
                </dv-border-box-12>
                <!-- <div class="title-nav" id="huaxing"></div> -->
                <!-- <div class="ver"> -->
                <!-- <div id="main"> </div> -->
                <!-- <div id="echarts"></div> -->
                <!-- </div> -->
                <!-- <div id="echarts2"></div> -->
            </div>
            <div class="ccenter">
                <dv-border-box-12>
                    <div id="main3"></div>
                </dv-border-box-12>

            </div>
            <div class="cright">
                <dv-border-box-12>
                    <div id="main2"></div>

                </dv-border-box-12>
            </div>



        </div>
        <div class="mapnav">
            <ul>
                <li>
                    <!-- <dv-border-box-8> -->
                    <div><span>最高温度</span>
                        <p>{{ model.oTempMax }}</p>
                    </div>
                    <!-- </dv-border-box-8> -->
                </li>
                <li>
                    <div><span>最低温度</span>
                        <p>{{ model.oTempMin }}</p>
                    </div>
                </li>
                <li>
                    <div><span>平均温度</span>
                        <p>{{ model.oTempAvg }}</p>
                    </div>
                </li>
                <li>
                    <div><span>最高湿度</span>
                        <p>{{ model.oHumiMax }}</p>
                    </div>
                </li>
                <li>
                    <div><span>最低湿度</span>
                        <p>{{ model.oHumiMin }}</p>
                    </div>
                </li>
                <li>
                    <div><span>平均湿度</span>
                        <p>{{ model.oHumiAvg }}</p>
                    </div>
                </li>
                <li>
                    <div><span>最大电流</span>
                        <p>{{ model.oAmax }}</p>
                    </div>
                </li>
                <li>
                    <div><span>最小电流</span>
                        <p>{{ model.oAmin }}</p>
                    </div>
                </li>
                <li>
                    <div><span>总能耗使用</span>
                        <p>{{ model.oApAll }}</p>
                    </div>
                </li>
                <li>
                    <div><span>最大光照强度</span>
                        <p>{{ model.oIllMax }}</p>
                    </div>
                </li>
                <li>
                    <div><span>最小光照强度</span>
                        <p>{{ model.oIllMin }}</p>
                    </div>
                </li>
                <li>
                    <div><span>平均光照强度</span>
                        <p>{{ model.oIllAvg }}</p>
                    </div>
                </li>
                <li>
                    <div><span>产量</span>
                        <p>{{ model.output }}</p>
                    </div>
                </li>
                <li>
                    <div><span>产出与能耗比</span>
                        <p>{{ model.proportion }}</p>
                    </div>
                </li>
                <li>
                    <div><span>时间</span>
                        <p>{{ model.recordTime }}</p>
                    </div>
                </li>

            </ul>
        </div>



    </div>
</template>

<script>

import screenfull from 'screenfull'
import Bar from '../../components/bar.vue'
import * as echarts from 'echarts';
import { getdailyConsumAPI, getconsumQueryAPI } from '@/api/system/baobiao.js'
import { deviceStateAPI, stockStateAPI, dataStateAPI, rateStateAPI, rateLineAPI } from '@/api/system/dataanalysis'

export default {

    data() {
        return {
            qp: '全屏显示',
            key: 1,
            // 全屏显示
            isFullFlag: true,
            options: [
                {
                    value: '2',
                    label: '2天内'
                },
                {
                    value: '3',
                    label: '3天内'
                }, {
                    value: '5',
                    label: '5天内'
                }, {
                    value: '7',
                    label: '7天内'
                }, {
                    value: '10',
                    label: '10天内'
                }, {
                    value: '15',
                    label: '15天内'
                }],
            value: '5',
            ff: false,
            value1: this.getNow(),
            // value1: "2023/2/22",
            flag: false,
            tableData: [
                {
                    address: "123"
                }
            ],
            config: {},
            deviceCounts: 0,
            deviceOnlineCounts: 0,
            stockSumNum: 0,
            stockWarnNum: 0,
            tip: '',
            list: [],
            nowtime: '',
            model: {
                oAmax: 0,
                oAmin: 0,
                oDtcCount: 0,
                oHumiAvg: 0,
                oHumiMax: 0,
                oHumiMin: 0,
                oIllAvg: 0,
                oIllMax: 0,
                oIllMin: 0,
                oTempAvg: 0,
                oTempMin: 0,
                oTempMax: 0,

            }

        }
    },
    mounted() {
        this.getrateLineAPI()
        this.getrateState()
        this.getCount()
        this.getCount123()
        this.newtime()
        this.showEcharts()
        this.getDataState()
        this.getList()
        // this.pieOutlineFunc()
        window.addEventListener('resize', this.getCount)
        // 页面加载完成的时候，主动对屏幕进行适配
        // this.getCount()
        // setTimeout(() => {
        //     this.$refs.box.initWH()
        // }, 100)
        // const element = document.getElementById('content');
        // document.getElementById('full').addEventListener('click', () => {
        //     if (screenfull.isEnabled) {
        //         screenfull.request(element)
        //         // this.isFullFlag=false
        //     }



        // })
        // var that = this
        // var erd = elementResizeDetectorMaker()
        // erd.listenTo(document.getElementsByClassName("l"), function (element) {
        //     var width = element.offsetWidth
        //     var height = element.offsetHeight
        //     that.$nextTick(function () {
        //         console.log("Size: " + width + "x" + height)
        //         //使echarts尺寸重置
        //         echarts.init(document.getElementById("main1")).resize()

        //     })
        // })

    },
    methods: {
        toggleFullScreen() {
            const element = document.getElementById('content');
            if (!document.fullscreenElement) {
                element.requestFullscreen();
                this.qp = '退出全屏'
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    this.qp = '全屏显示'
                }
            }
        },

        // pieOutlineFunc() {
        //     // var _this = this
        //     window.addEventListener('resize', function (e) {
        //         this.$nextTick(() => {
        //             console.log(this.$refs.box)
        //             setTimeout(() => {
        //                 this.key++
        //             }, 100)

        //         })
        //     })
        // },

        // this.pieOutlineFunc()

        // 电费曲线
        getrateLineAPI() {
            rateLineAPI().then(res => {
                console.log(res);
                var chartDom = document.getElementById('main3');
                let myChart = echarts.getInstanceByDom(
                    chartDom
                );
                if (myChart == null) {
                    myChart = echarts.init(chartDom);
                }

                // var myChart = echarts.init(chartDom);
                var option;
                option = {

                    grid: {
                        top: "30%",
                        bottom: '20%',
                        left: '15%',
                        right: '10%'

                    },
                    legend: {
                        name: '电费',
                        show: true,
                        y: '10%',
                        // type: "plain"
                        textStyle: {
                            color: 'rgb(255,255,255,0.9)'
                        }
                    },
                    xAxis: {

                        type: 'category',
                        data: res.data[1],
                        axisLabel: {
                            interval: 0,
                            //    rotate:10  
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#FFF"
                            }
                        },
                        axisLabel: {
      formatter: function (value) {
        // 每个字符为 12 像素，超过 8 个字符时换行
        var maxLength = 5;
        if (value.length > maxLength) {
          var subValue = value.substring(0, maxLength) + '\n' + value.substring(maxLength);
          return subValue;
        } else {
          return value;
        }
      }
    }

                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#FFF"
                            }
                        },
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    series: [

                        {
                            label: {
                                // 柱图头部显示值
                                show: true,
                                position: "top",
                                // textStyle: { //数值样式
                                // color: '#fff',
                                fontSize: 15
                                // }
                            },
                            lineStyle: {
                                color: '#12daab'

                            },
                            itemStyle: {
                                color: '#fff'

                            },
                            name: '电费',
                            data: res.data[0],
                           
                            type: 'line',
                            showBackground: true,
                            // backgroundStyle: {
                            //     // color: '#66dffb'
                            // }
                        }
                    ]
                };
                //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // option && myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                    // myChartSex2.resize();
                });
            })
        },
        // 电费表格
        getrateState() {
            rateStateAPI().then(res => {
                console.log(res);
                this.tableData = res.data
                //     var chartDom = document.getElementById('echarts2');
                //     var myChart = echarts.init(chartDom);
                //     var option;

                //     option = {
                //         title: {
                //             // text: 'Referer of a Website',
                //             // subtext: 'Fake Data',
                //             // left: 'center'
                //         },
                //         tooltip: {
                //             trigger: 'item'
                //         },
                //         grid: {
                //             top: "70%",
                //             // bottom: '20%',
                //             left: '15%',
                //             // right: '10%'

                //         },
                //         legend: {

                //             // orient: 'vertical',
                //             left: 'center',
                //             y: "5%",
                //             textStyle: {
                //                 color: '#fff'
                //             }

                //         },
                //         series: [
                //             {
                //                 name: '电费统计',
                //                 type: 'pie',
                //                 radius: '50%',
                //                 data: [
                //                     { value: res.data[0].electricityRateTop, name: '尖峰值电费' },
                //                     { value: res.data[0].electricityRateHigh, name: ' 峰值电费' },
                //                     { value: res.data[0].electricityRateCommon, name: '平值电费' },
                //                     { value: res.data[0].electricityRateLow, name: '谷值电费' },


                //                 ],
                //                 emphasis: {
                //                     itemStyle: {
                //                         shadowBlur: 10,
                //                         shadowOffsetX: 0,
                //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                //                     }
                //                 }
                //             }
                //         ]
                //     };

                //     option && myChart.setOption(option);
            })

        },
        // 电费表格单元格样式
        styleBack({ row, column, rowIndex, columnIndex }) {
            return {
                backgroundColor: "#002465",
                textAlign: 'center',
                color: '#66dffb',
                fontSize: '15px',
                fontWeight: '700'
            }

        },
        // 产量曲线
        getCount123() {
            getconsumQueryAPI(this.value).then(res => {
                // const setEchartWH = { //设置控制图表大小变量
                //     width: 600,
                //     height: 600
                // };
                console.log(res);

                var chartDom = document.getElementById('main2');
                let myChart = echarts.getInstanceByDom(
                    chartDom
                );
                if (myChart == null) {
                    myChart = echarts.init(chartDom);
                }

                // var myChart = echarts.init(chartDom);
                var option;
                option = {

                    grid: {
                        top: "30%",
                        bottom: '20%',
                        left: '15%',
                        right: '10%'

                    },
                    legend: {
                        name: '能耗(KWH),产量',
                        show: true,
                        y: '10%',
                        // type: "plain"
                        textStyle: {
                            color: 'rgb(255,255,255,0.9)'
                        }
                    },
                    xAxis: {

                        type: 'category',
                        data: res.data[1],
                        axisLabel: {
                            interval: 0,
                            //    rotate:10  
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#FFF"
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#FFF"
                            }
                        },
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    series: [
                        {
                            label: {
                                // 柱图头部显示值
                                show: true,
                                position: "top",
                                // textStyle: { //数值样式
                                // color: '#fff',
                                fontSize: 15
                                // }
                            },
                            lineStyle: {
                                color: '#66dffb'

                            },
                            itemStyle: {
                                color: '#66dffb'

                            },
                            name: '产量',
                            data: res.data[0],
                            type: 'line',
                            showBackground: true,
                            backgroundStyle: {
                                color: '#66dffb'
                            }
                        }
                    ]
                };
                //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // option && myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                    // myChartSex2.resize();
                });


                // window.onresize = myChart.resize;
                // 


            })

        },
        // 能耗曲线
        getCount() {
            getconsumQueryAPI(this.value).then(res => {
                // const setEchartWH = { //设置控制图表大小变量
                //     width: 600,
                //     height: 600
                // };
                console.log(res);

                var chartDom = document.getElementById('main1');
                let myChart = echarts.getInstanceByDom(
                    chartDom
                );
                if (myChart == null) {
                    myChart = echarts.init(chartDom);
                }

                // var myChart = echarts.init(chartDom);
                var option;
                option = {

                    grid: {
                        top: "30%",
                        bottom: '20%',
                        left: '15%',
                        right: '10%'

                    },
                    legend: {
                        name: '能耗(KWH),产量',
                        show: true,
                        y: '10%',
                        // type: "plain"
                        textStyle: {
                            color: 'rgb(255,255,255,0.9)'
                        }
                    },
                    xAxis: {

                        type: 'category',
                        data: res.data[1],
                        axisLabel: {
                            interval: 0,
                            //    rotate:10  
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#FFF"
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: "#FFF"
                            }
                        },
                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    series: [
                        {
                            label: {
                                // 柱图头部显示值
                                show: true,
                                position: "top",
                                //数值样式
                                color: '#fff',
                                fontSize: 15

                            },
                            name: '能耗(KWH)',
                            data: res.data[0],
                            type: 'bar',
                            barWidth: 20,
                            itemStyle: {
                                borderRadius: [20 / 2, 20 / 2, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: '#5052EE'
                                    },
                                    {
                                        offset: 1,
                                        color: '#AB6EE5'
                                    }
                                ])

                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        },

                    ]
                };
                //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // option && myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                    // myChartSex2.resize();
                });


                // window.onresize = myChart.resize;
                // 


            })

        },
        // 当前时间
        getNow() {
            var date = new Date();
            var data1 = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + (date.getDate() - 1);
            return data1

        },
        // 温湿度光照电流单元格
        getList() {
            getdailyConsumAPI(this.value1).then(res => {
                console.log(res);
                this.model = res.data[0];
                console.log(this.model);
                this.flag = true
            })
        },
        // 定时器调用时间
        newtime() {
            // console.log(11);
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
                clearTimeout(t);//清除定时器
                var dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                //    this.nowtime=y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+""
                //    console.log(this.nowtime);

                document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }
        },
        // 两个圆环
        showEcharts() {
            deviceStateAPI().then(res => {
                // console.log(res)

                this.deviceCounts = res.data[0].deviceCounts
                this.deviceOnlineCounts = res.data[0].deviceOnlineCounts
                // console.log(deviceCounts)
                let data1 = {
                    top: "100",
                    itemGap: 0,
                    legend_data: ["正常", "故障"],
                    series_data: [
                        { value: this.deviceCounts, name: '正常' },
                        { value: this.deviceCounts - this.deviceOnlineCounts, name: '故障' },

                    ]
                };

                this.typeCharts0('echarts', data1)
            })
            // =============
            stockStateAPI().then(res1 => {
                console.log(res1)

                this.stockSumNum = res1.data[0].stockSumNum
                this.stockWarnNum = res1.data[0].stockWarnNum
                // console.log(deviceCounts)
                let data2 = {
                    top: "100",
                    itemGap: 0,
                    legend_data: ["库存项目总数", "库存不足项目总数"],
                    series_data: [
                        { value: this.stockSumNum - this.stockWarnNum, name: '库存项目总数' },
                        { value: this.stockWarnNum, name: '库存不足项目总数' },

                    ]
                };

                this.typeCharts1('main', data2)
            })
        },
        // 圆环的方法1(颜色不同)
        typeCharts0(id, summary) {
            let that = this
            let fontColor = '#fff';
            var chartDom = document.getElementById(id);
            var myChart = echarts.init(chartDom);
            let option = {
                color: ["#2c6cc4", "#24375c"],
                title: {
                    text: summary.text,   //标题
                    subtext: summary.subtext,
                    left: "center",
                    top: summary.top,
                    itemGap: summary.itemGap,
                    textBaseline: "middle",
                    // textStyle: {
                    color: fontColor,
                    fontFamily: "微软雅黑",
                    fontSize: 24,
                    fontWeight: "normal",
                    lineHeight: 26,
                    // },
                },
                tooltip: {  //浮框 （显示数值）
                    trigger: "item",
                    formatter: "{b}: {c} ({d}%)",
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'top',
                    itemGap: 5,
                    itemWidth: 18,
                    itemHeight: 12,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                    data: summary.legend_data,
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["50%", "60%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        label: {
                            // normal: {
                            rich: {
                                a: {
                                    color: '#3a7ad5',
                                    align: 'center',
                                    fontSize: 14,
                                    fontWeight: "bold"
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    fontSize: 12
                                }
                            },
                            formatter: function (params) {
                                return "{b|在线设备总数}\n\n" + "{a|" + that.deviceOnlineCounts + "}" + "\n\n{b|设备总数}\n\n" + "{a|" + that.deviceCounts + "}";
                            },
                            position: 'center',
                            show: true,
                            // textStyle: {
                            fontSize: '12',
                            fontWeight: 'normal',
                            color: '#fff'
                            // }
                            // },

                        },
                        itemStyle: {
                            // normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            // },

                        },
                        labelLine: {
                            // normal: {
                            show: false,
                            // },
                        },
                        data: summary.series_data,
                    },
                ],
            };
            if (summary.font_size) {
                option.title.textStyle.fontSize = summary.font_size;
            }
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
                // myChartSex2.resize();
            });
        },
        // 圆环的方法2(颜色不同)
        typeCharts1(id, summary) {
            let that = this
            let fontColor = '#fff';
            var chartDom = document.getElementById(id);
            var myChart = echarts.init(chartDom);
            let option = {
                color: ["#613fd1", "#453284"],
                title: {
                    text: summary.text,   //标题
                    subtext: summary.subtext,
                    left: "center",
                    top: summary.top,
                    itemGap: summary.itemGap,
                    textBaseline: "middle",
                    textStyle: {
                        color: fontColor,
                        fontFamily: "微软雅黑",
                        fontSize: 24,
                        fontWeight: "normal",
                        lineHeight: 26,
                    },
                },
                tooltip: {  //浮框 （显示数值）
                    trigger: "item",
                    formatter: "{b}: <br/>{c} ({d}%)",
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    y: 'top',
                    itemGap: 5,
                    itemWidth: 18,
                    itemHeight: 12,
                    textStyle: {
                        color: fontColor,
                        fontSize: 10,
                    },
                    data: summary.legend_data,
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["50%", "60%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        label: {
                            // normal: {
                            rich: {
                                a: {
                                    color: '#603dd0',
                                    align: 'center',
                                    fontSize: 14,
                                    fontWeight: "bold"
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    fontSize: 12
                                }
                            },
                            formatter: function (params) {
                                return "{b|库存不足项目数}\n\n" + "{a|" + that.stockWarnNum + "}" + "\n\n{b|库存项目总数}\n\n" + "{a|" + that.stockSumNum + "}";
                            },
                            position: 'center',
                            show: true,
                            // textStyle: {
                            fontSize: '12',
                            fontWeight: 'normal',
                            color: '#fff'
                            // }
                            // },

                        },
                        itemStyle: {
                            // normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            // },

                        },
                        labelLine: {
                            // normal: {
                            show: false,
                            // },
                        },
                        data: summary.series_data,
                    },
                ],
            };
            if (summary.font_size) {
                option.title.textStyle.fontSize = summary.font_size;
            }
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
                // myChartSex2.resize();
            });
        },
        // 轮播表
        getDataState() {
            // let that=this
            dataStateAPI().then(res => {
                // console.log(res);
                let orderAll = [];
                res.data.map(item => {
                    orderAll.push([item.deviceDataName, item.dateState, item.deviceData, item.latestRecordTime])
                });
                // console.log(orderAll);
                this.config = {
                    // align: "center",
                    header: ['<span style="color:#66dffb;">设备名称</span>', '<span style="color:#66dffb;">数据状态</span>', '<span style="color:#66dffb;">数据详情</span>', '<span style="color:#66dffb;">时间</span>'],
                    data: orderAll,
                    oddRowBGC: "transparent",
                    evenRowBGC: "rgba(12, 26, 63, 0.3)",
                    headerBGC: "#093e79",
                    columnWidth: [250, 250, 150, 150]
                    // columnWidth: [120]
                }


            })

        },
        skipto(config) {
            this.tip = config.ceil
            // console.log('config', config)
            // console.log('ceil', config.ceil)
            // console.log('hang', config.rowIndex)
            // this.$message.success('查看详情成功，可在控制台查看打印的数据')
        },




    },
    components: {
        Bar
    },
    computed: {
        isCollapse() {
            return this.$store.state.app.sidebar;
        }
    }


}

</script>

<style lang="scss" scoped>
ul li,
ol li {
    list-style: none;
}

// 暂时不用按钮 颜色为透明  不影响布局
.el-button--primary {
    color: #FFF;
    background-color: #7995e8;
    border-color: transparent;
}


.item {
    margin: 40px;
}

.tab {
    text-align: center;
    position: relative;
    // width: 99%;
    // padding:5px;
    margin-top: 8px;
    margin-left: 10px;

    // border: 1px rgb(43, 219, 78) solid;
    .btn {

        position: relative;
        top: -110px;
        right: 20px;
        //    width: 300px;
        // border: 1px red solid;
        // margin-top: -130px;
        text-align: right;
    }
}

.content {
    width: 100%;
    height: 100%;
    background: #0d325f;
    background-size: 100% 100%;
    position: absolute;

    .head {
        margin: 0;
        position: relative;
        height: 90px;
        background: url(../../../images/topbg.png) center bottom no-repeat;
        background-size: 100% 100%;
        border: 1px solid #0d325f;



        h1 {
            font-size: 30px;
            text-align: center;
            line-height: 60px;
            color: #daf9ff;
        }

        .time {
            color: #daf9ff;
            position: absolute;
            left: 40px;
            line-height: 40px;
            top: 0;
            opacity: .7
        }

        .name {
            color: #daf9ff;
            position: absolute;
            right: 40px;
            line-height: 40px;
            top: 0;
            opacity: .7
        }
    }

    // border: 1px solid #15e264e1;
    .line {
        width: 100%;
        display: flex;
        // border: 1px solid #15e264e1;
        // height: 260px;
        height: 30%;
        margin-top: -15px;

        .l {
            width: 30%;

            // border: 1px solid #b5e352e1;

            #main {
                width: 100%;
                height: 100%;
                // margin: auto;
                // border: 1px red solid;
            }

            // 原
            // #main1 {
            //     width: 100%;
            //     height: 100%;
            //     // margin: auto;
            //     // border: 1px red solid;
            // }

        }

        .c {
            overflow: auto;
            // position: relative;
            width: 60%;

            // border: 1px solid #b5e352e1;
            .lunbo {
                padding: 2%;
                // padding: 5px auto;
                // border: 1px solid #b5e352e1;
                width: 100%;
                height: 90%;
            }

        }

        .r {
            width: 30%;

            // border: 1px solid #b5e352e1;
            // 原
            // #main2 {
            //     width: 100%;
            //     height: 100%;
            //     // margin: auto;
            //     // border: 1px red solid;
            // }
            #echarts {
                width: 100%;
                height: 100%;
                // margin: auto;
                // border: 1px red solid;
            }
        }



    }

    .chart {
        margin-top: 5px;
        width: 100%;
        height: 360px;
        // border: 1px red solid;
        display: flex;

        //  margin-top: -5%;
        .cleft {

            display: flex;
            width: 33%;
            height: 95%;
            // border: 1px rgb(35, 70, 184) solid;

            // .ver {
            // width: 50%;
            // height: 100%;
            // border: 1px pink solid;
            //原 #main
            #main1 {
                width: 100%;
                height: 100%;
                // border: 1px red solid;
            }

            // 原#echarts
            // #main2 {
            //     // margin-left: 50px;
            //     width: 50%;
            //     height: 100%;
            //     // border: 1px red solid;
            // }

            // }


            // #echarts2 {
            //     border: 1px red solid;
            //     margin-top: 30px;
            //     width: 50%;
            //     height: 100%;
            // }
        }

        .ccenter {
            // margin-top: 3%;
            width: 33%;
            height: 95%;
            // border: 1px rgb(71, 211, 46) solid;
            margin-left: 30px;

            #main3 {
                width: 100%;
                height: 100%;
            }

        }

        .cright {
            // margin-top: 3%;
            width: 33%;
            height: 95%;
            // border: 1px rgb(71, 211, 46) solid;
            margin-left: 30px;

            #main2 {
                // margin-left: 50px;
                width: 100%;
                height: 100%;
                // border: 1px red solid;
            }

        }


    }

    .mapnav {
        // padding-left: -10px;
        width: 100%;
        height: 250px;
        // border: 1px red solid;
        // margin-top: -100px;


        div {
            // 
            // border: 1px pink solid;
            margin-top: -19px;
            background: url(../../../images/bg2.png) no-repeat;
            background-size: 100% 130%;
            width: 200px;
            height: 100px;
            text-align: center;
            padding-top: 38px;
            padding-left: -10px;
            line-height: 170%;

            span {
                // border: 1px red solid;
                color: #66dffb;
                font-size: 14px;
                opacity: .6;
                line-height: 15px;
                // margin-top: 40px;
            }

            p {
                // border: 1px red solid;
                color: #daf9ff;
                font-size: 18px;
                font-weight: bold;
                margin-top: -8px;
                line-height: 30px;
            }

        }





        li {
            float: left;
            // margin-right: 16px;
            margin: 1px;
            margin-top: 10px;
        }
    }







}</style>